html{
	height: 100%;
	opacity: 0.8;
	background: linear-gradient(#951358 0%, #136478 80%);
}
.container{
	perspective: 1500px;
	margin-top: 200px;
}
.cube{
	margin:0 auto;
	height: 200px;
	width: 200px;
	transform-style: preserve-3d;
	animation:myMove 5s linear infinite;
	
}
@keyframes myMove{
	from{
		transform: rotateX(0deg) rotateY(0deg) ;
	}
	to{
		transform: rotateX(360deg) rotateY(360deg) ;
	}
}
.cube div{
	border: 1px solid white;
	color: white;
	line-height: 200px;
	vertical-align: middle;
	text-align: center;
	height: 200px;
	width: 200px;
	position: absolute;
}
.plane-1 {
	transform:  translateZ(100px);
	background: rgb(255,0,0);
}

.plane-2{
	transform: rotateX(90deg) translateZ(100px);
	background-color: rgb(128,0,0);
}

.plane-3 {
	transform: rotateY(90deg) translateZ(100px);
    background-color: rgb(0,255,0);
}

.plane-4 {
	transform: rotateX(90deg) translateZ(-100px);
	background-color: rgb(0,128,0);
}

.plane-5 {
	transform: rotateY(90deg) translateZ(-100px);
	background-color: rgb(0,0,255);
}

.plane-6 {
	transform:  translateZ(-100px);
	background-color: rgb(128,0,128);
}